import { useState, useEffect } from 'react';
import { Dimensions, FlatList, StyleSheet, TouchableOpacity, Text, Button, View, Image, ImageBackground, ScrollView } from 'react-native';
import { FontAwesome5 } from '@expo/vector-icons';
import axios from 'axios';

const { width, height } = Dimensions.get('window');

const MoreTopics = ({ navigation }) => {
    const [topics, setTopics] = useState(['草莓', '圣女果', '黄瓜', '郁金香', '玫瑰',])
    const toTopic = (e) => {
        navigation.navigate('topic', {
            cropsid: e
        });
    }
    useEffect(() => {
        axios.get('/news/moretopics')
            .then(res => {
                console.log(res);
            if(res.code == 200){
                setTopics(res.data);
            }
            })
    }, [])
    return (
        <View style={{ alignItems: 'center' }}>
            {
                topics.map((item) => {
                    return (
                        <View
                            style={{
                                width: width * 0.90, height: 60,
                                backgroundColor: '#fff',
                                borderColor: '#BBBBBB',
                                borderRadius: 9,
                                borderWidth: 1,
                                flexDirection: 'row',
                                alignItems: 'center',
                                paddingLeft: 20,
                                marginTop: 5
                            }}
                            key={item.cropsid}
                        >
                            <FontAwesome5 name="gripfire" size={24} color="#F95606" />
                            <Text style={{ fontSize: 18, left: 10 }} onPress={()=>toTopic(item.cropsid)}>{item.cropname} </Text>
                        </View>
                    )
                })
            }
        </View>
    )
}

export default MoreTopics
